<template>
	<view class="eyesight">
		<view v-if="childList.length" class="eyesightBox">
			<view class="switchChild">
				<view class="switchBtn" @click="showDrawer">{{currChild.name}}<u-icon class="u-icon" size="16" name="arrow-down-fill"></u-icon></view>
				<view class="btns">
					<u-icon class="u-icon" @click="scanCode" name="scan" size="40"></u-icon>
					<text class="iconfont u-icon" @click="toSetting">&#xe673;</text>
				</view>
			</view>
			<u-popup class="navPopup" ref="popup" v-model="popShow">
				<view class="childList-area">
					<view class="childList">
						<u-cell-group>
							<u-cell-item v-for="(p, i) in childList" :key="i" @click="switchChild(p)">
								<view slot="title" class="u-cell-item-title">
									<view class="name">{{p.name}}</view>
									<view class="age">{{p.age}}岁</view>
									<view class="gradeClass">{{p.gradeClass}}年级</view>
								</view>
							</u-cell-item>
						</u-cell-group>
					</view>
					<view class="popup-submit">
						<u-button ripple type="primary" @click="addChild"><text class="iconfont">&#xe61a;</text>添加学生</u-button>
					</view>
				</view>
			</u-popup>
			<view v-if="childrenAnalysis" class="childDetail">
				<view class="top">
					<view class="preview">
						<view class="left">
							<view class="u-circle-progress">
								<u-circle-progress v-if="!popShow" :active-color="progressColor" :percent="tabList[tabIdx].score">
									<view class="u-progress-content">
										<view :style="{ color: progressColor }" class="num">
											<u-count-to :class="['u-count-to', `color-${progressColor.substr(1)}`]" :end-val="tabList[tabIdx].score"></u-count-to>
											分
										</view>
										<text class='info'>视力得分</text>
									</view>
								</u-circle-progress>
							</view>
							<view class="age-grade">
								<view class="age-item"><view class="point">·</view><view>年龄：{{currChild.age}}岁</view></view>
								<view class="age-item"><view class="point">·</view><view>年级：{{currChild.gradeClass}}</view></view>
							</view>
						</view>
						<view class="middle">
							<image :class="{ glasses: true, right: tabIdx == 1 }" src="/static/image/glasses.png"></image>
							<image v-if="parentChildren.gender" class="child" src="/static/image/boy.png"></image>
							<image v-else class="child girl" src="/static/image/girl.png"></image>
						</view>
						<view :style="{ background: progressColor }" class="num-area right idle">
							<text class="num">{{tabList[tabIdx].vision}}</text>
							<text>{{tabList[tabIdx].name}} | {{tabList[tabIdx].state}}</text>
						</view>
					</view>
					<view class="eyeTab">
						<text v-for="(p, i) in tabList" :key="i" :class="{ tabItem: true, on: tabIdx == i }" @click="tab(i)">看{{p.name}}视力</text>
					</view>
					<view class="tips">
						<view class="message">
							<text class="iconfont yellow">&#xe603;</text>
							<text class="yellow">tips:</text>比<text :style="{ color: progressColor }" class="yellow bold">{{tabList[tabIdx].prec}}%</text>的人健康
						</view>
						<text class="conclusion">为保持健康请继续保持良好作息</text>
					</view>
					<view class="consultation">
						<u-icon color="#158766" size="50" name="kefu-ermai"></u-icon>
					</view>
				</view>
				<view class="bottom line">
					<text class="title">理想视力 5.0</text>
					<view class="lineBox">
						<view class="u-line-progress">
							<u-line-progress :active-color="progressColor" height="20" :percent="tabList[tabIdx].prec" :show-percent="true">
								<view class="u-line-progress-text">
									<text class="iconfont face">{{progressIcon}}</text>
								</view>
							</u-line-progress>
						</view>
						<view class="text">
							<text>近视</text>
							<text>假性近视</text>
							<text>标准</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="noAnalysis">
				<view class="noData1">
					<image src="/static/image/noData1.png"></image>
					<view class="tips">
						当前学生暂无数据，请尽快在学校完成检查！
					</view>
				</view>
				<view class="noData1 noData2">
					<image src="/static/image/noData2.png"></image>
					<view class="tips">
						暂无数据，无法给出建议！
					</view>
				</view>
			</view>
		</view>
		<view v-else class="noStudent">
			<view class="addStudent">
				<u-button style="width: 60%;" ripple type="primary" @click="addStudent"><text class="iconfont">&#xe61d;</text>手动添加</u-button>
				<text class="iconfont">&#xe61a;</text>
				<u-button v-if="false" style="width: 80%;" ripple type="primary" @click="scanCode"><text class="iconfont">&#xe61a;</text>扫码录入</u-button>
			</view>
			<view class="banner">
				<image src="/static/image/eyesightBanner.png"></image>
				<view class="tips">
					知道吗，宝宝从2岁开始就可以进行视力检测了。 宝宝不同年龄视力标准不一样
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		data() {
			return {
				currChild: {},
				childrenAnalysis: null,
				parentChildren: {
					gender: 0,
				},
				tabIdx: 0,
				tabList: [
					{ name: '左眼', vision: 0, state: '健康', score: '95', prec: '87', field: 'left' },
					{ name: '右眼', vision: 0, state: '健康', score: '73', prec: '56', field: 'right' },
				],
				popShow: false,
				childList: [],
			}
		},
		computed: {
			...mapState(['parentId']),
			progressColor() {
				const color = ['#FFAF00', '#FF6130', '#158766']
				const prec = this.tabList[this.tabIdx].prec
				const idx = parseInt(prec / 33.3)
				return color[idx]
			},
			progressIcon() {
				const icon = ['\ue611', '\ue60e', '\ue612']
				const prec = this.tabList[this.tabIdx].prec
				const idx = parseInt(prec / 33.3)
				return icon[idx]
			},
		},
		onLoad() {

		},
		methods: {
			switchChild(row) {
				this.currChild = row
				this.getChildDetail()
				this.$refs.popup.close()
			},
			async getInit() {
				// 获取孩子列表
				const getChildList = await this.getChildList()
				this.childList = getChildList || []
				if (!this.childList.length) {
					this.$u.toast('暂未添加小孩')
					return
				}
				// 获取小孩详情
				let defaultStatusChild = this.childList.find(p => p.defaultStatus)
				defaultStatusChild = defaultStatusChild || this.childList[0]
				this.currChild = defaultStatusChild
				await this.getChildDetail()
			},
			getChildList() {
				return this.$http.post('/parent/child/list', {
					parentId: this.parentId
				}).then(res => res.data)
			},
			getChildDetail() {
				uni.showLoading({
					title: '获取学生详情'
				})
				return this.$http.post('/parent/child/get', {
					parentChildrenId: this.currChild.id
				}).then(res => {
					uni.hideLoading()
					// 视力分析
					this.childrenAnalysis = res.data.childrenAnalysis
					if (this.childrenAnalysis) {
						this.tabList[this.tabIdx].vision = this.childrenAnalysis[`${this.tabList[this.tabIdx].field}Vision`]
					}
					// 小孩基本信息
					this.parentChildren = res.data.parentChildren
					return
				})
			},
			addStudent() {
				uni.navigateTo({
				    url: '/pages/addChild/addChild'
				});
			},
			tab(i) {
				this.tabIdx = i
				if (this.childrenAnalysis) {
					this.tabList[this.tabIdx].vision = this.childrenAnalysis[`${this.tabList[this.tabIdx].field}Vision`]
				}
			},
			scanCode() {
				uni.scanCode({
				    success(res) {
				        console.log('条码', res)
				    }
				})
			},
			addChild() {
				uni.navigateTo({
					url: '/pages/addChild/addChild'
				})
			},
            showDrawer() {
                this.popShow = true
            },
			toSetting() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.eyesight {
		.eyesightBox {
			.switchChild {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: $uni-font-size-base;
				background: #fff;
				.switchBtn {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-weight: bold;
					.u-icon {
						margin-left: 15rpx;
					}
				}
				.btns {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					.u-icon {
						margin-left: 25rpx;
					}
					.iconfont {
						font-size: 46rpx;
					}
				}
			}
			.childDetail {
				.top {
					background: #fff;
					position: relative;
					.childList-area {
						.childList {
							.u-cell-item-title {
								display: flex;
								flex-direction: row;
								justify-content: center;
								align-items: flex-start;
							}
						}
						.submit {
							width: 80%;
							margin: $uni-spacing-col-base auto 0;
						}
					}
					.preview {
						display: flex;
						flex-direction: row;
						justify-content: space-around;
						align-items: flex-start;
						position: relative;
						.left {
							.u-circle-progress {
							  width: 200rpx;
							  height:200rpx;
							  .u-progress-content {
								  display: flex;
								  flex-direction: column;
								  justify-content: center;
								  align-items: center;
								  .num {
									  font-size: 40rpx;
									  color: $uni-color-primary;
								  }
								  .info {
									  font-size: 20rpx;
									  color: $uni-text-color-grey;
								  }
							  }
							}
							.age-grade {
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: flex-start;
								color: $uni-text-color-grey;
								font-size: $uni-font-size-sm;
								line-height: 40rpx;
								margin-left: 24rpx;
								.age-item {
									display: flex;
									flex-direction: row;
									justify-content: center;
									align-items: center;
									.point {
										font-size: 0rpx;
										width: 10rpx;
										height: 10rpx;
										display: inline-block;
										border-radius: 50%;
										background: $uni-color-primary;
										margin-right: 10rpx;
									}
								}
							}
						}
						.middle {
							position: relative;
							width: 220rpx;
							text-align: center;
							.glasses {
								width: 30rpx;
								height: 30rpx;
								position: absolute;
								top: 97rpx;
								left: 61rpx;
								transition: all .4s;
								&.right {
									left: 129rpx;
								}
							}
							.child {
								width: 171rpx;
								height: 300rpx;
								&.girl {
									width: 220rpx;
									margin: 9rpx 0 0 -15rpx;
								}
							}
						}
						.num-area.right {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							border-radius: 50%;
							width: 180rpx;
							height: 180rpx;
							box-shadow: 0 0 10px rgba(0, 0, 0, .1);
							text-shadow: 0 0 5px rgba(68, 204, 164, .5);
							color: #fff;
							position: relative;
							&:before {
								position: absolute;
								content: '';
								top: 0;
								right: 0;
								bottom: 0;
								left: 0;
								background-image: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
							}
							font-size: 22rpx;
							.num {
								margin-top: -10rpx;
								font-size: 50rpx;
							}
						}
					}
					.eyeTab {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						width: 100%;
						.tabItem {
							position: relative;
							border-radius: 100rpx;
							height: 60rpx;
							line-height: 60rpx;
							background: #fff;
							box-shadow: 0 0 10px rgba(0, 0, 0, .1);
							color: $uni-color-primary;
							width: 200rpx;
							text-align: center;
							margin: 50rpx 20rpx;
							transition: all .2s;
							&::before {
								content: '';
								position: absolute;
								bottom: 100%;
								left: 50%;
								margin-left: -10rpx;
								width: 0;
								height: 0;
								border-left: 10rpx solid transparent;
								border-right: 10rpx solid transparent;
								border-bottom: 10rpx solid #fff;
							}
							&.on {
								background: $uni-color-primary;
								color: #fff;
							}
							&.on:before {
								border-bottom: 10rpx solid $uni-color-primary;
							}
						}
					}
					.tips {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						color: $uni-text-color-grey;
						.message {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							flex-wrap: wrap;
							.yellow {
								color: #FFAF00;
								margin: 0 15rpx;
							}
							.bold {
								color: #FFAF00;
								font-size: 36rpx;
								font-weight: bold;
								margin: 0 15rpx;
							}
							.iconfont {
								margin: 0;
								font-size: 40rpx;
							}
						}
						.conclusion {
							margin: 10rpx 0 35rpx;
						}
					}
					.consultation {
						position: absolute;
						bottom: 35rpx;
						right: 0;
						border-radius: 100rpx 0 0 100rpx;
						box-shadow: 0 0 10px rgba(0, 0, 0, .1);
						padding: 15rpx 25rpx 15rpx 15rpx;
					}
				}
				.bottom.line {
					background: #fff;
					margin: $uni-spacing-col-base 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.title {
						font-weight: bold;
						margin: 30rpx 0 20rpx;
					}
					.lineBox {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 90%;
						margin: 0 auto;
						.u-line-progress{
							width: 100%;
							.face {
								font-size: 45rpx;
								text-shadow: 0 0 5rpx rgba(0, 0, 0, .5);
								color: #fff;
								margin-right: -5rpx;
							}
						}
						.text {
							width: 100%;
							display: flex;
							flex-direction: row;
							justify-content: space-around;
							align-items: center;
							font-size: $uni-font-size-sm;
							color: $uni-text-color-grey;
							margin: 10rpx 0 30rpx;
						}
					}
				}
			}
			.noAnalysis {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				.noData1 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 100%;
					background: #fff;
					text-align: center;
					height: 400rpx;
					image {
						width: 190rpx;
						height: 180rpx;
					}
					.tips {
						color: $uni-text-color-grey;
						width: 82%;
						margin-top: 30rpx;
					}
				}
				.noData2 {
					margin: $uni-spacing-col-base 0;
				}
			}
		}
		.noStudent {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			.addStudent {
				background: #fff;
				height: 400rpx;
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				& > .iconfont {
					font-size: 50rpx;
					margin-left: 20rpx;
					color: #005e66;
				}
			}
			.banner {
				background: #fff;
				margin: $uni-spacing-col-base 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				image {
					width: 100%;
				}
				.tips {
					color: $uni-text-color-grey;
					width: 82%;
					margin-bottom: 30rpx;
				}
			}
		}
	}
	
	.idle {
	  animation: idle 4s ease-in-out infinite;
	  transition: transform 0.4s linear,  box-shadow 0.15s linear,  margin 0.1s linear,  width 0.1s linear,  height 0.1s linear;
	}
	 
	@keyframes idle {
	  from, to {
		transform: translate(-8rpx, 0rpx);
	  }
	  25% {
		transform: translate(-8rpx, -8rpx);
	  }
	  50% {
		transform: translate(0rpx, -8rpx);
	  }
	  75% {
		transform: translate(0rpx, 0rpx);
	  }
	}
</style>
